<template>

  <!-- 自己封装的 -->
  <div class="tab-bar">
    <template v-for="(tabItem, index) in tabList" :key="index">
      <div :class="['tab-bar-item', { active: currentIndex == index }]" @click="ItemClick(index, tabItem.path)"
        ref="tabItemRefs">
        <img :src="currentIndex == index ?
        getAssetURL(tabItem.activeIcon) :
        getAssetURL(tabItem.inactiveIcon)" alt="">
        <span>{{ tabItem.title }}</span>
      </div>

    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import tabList from "@/assets/data/tabbar.js"
import { getAssetURL } from "@/utils/load_assets.js"
import { useRouter } from 'vue-router';
const router = useRouter()
const tabItemRefs = ref(null)

let currentIndex = ref(0)
const ItemClick = (index, path) => {
  currentIndex.value = index
  router.push(path)
}
</script>

<style lang="less" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;

  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #333;

    &.active {
      color: var(--primary-color);
    }

    img {
      width: 40px;
      height: 30px;
    }
  }


}
</style>